<template>
<n-modal
    v-model:show="props.show"
>
  <n-card
    :style="style"
    :title="props.title"
  >
    <template #header-extra>
      <n-icon
          size="20"
          style="cursor: pointer"
          @click="handleClose"
      >
        <Close></Close>
      </n-icon>
    </template>
    <div class="body">
      <slot></slot>
    </div>
    <template #footer>
      <div class="footer">
        <n-space>
          <n-button type="info" @click="handleOk">{{props.okText}}</n-button>
          <n-button v-if="props.cancel" @click="handleClose">{{props.cancelText}}</n-button>
        </n-space>
      </div>
    </template>
  </n-card>
</n-modal>
</template>

<script lang="ts">
export default {
  name: "modal"
}
</script>

<script setup lang="ts">
import {onMounted} from "vue"
import {Close} from "@vicons/ionicons5"



const props = defineProps({
  width: {
    type: String,
    default: "600px"
  },
  show: {
    type: Boolean,
  },
  title: {
    type: String,
    default: ""
  },
  okText: {
    type: String,
    default: "确定"
  },
  cancelText: {
    type: String,
    default: "取消"
  },
  cancel: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits<{
  (e: 'cancel'): void
  (e: 'ok'): void
}>()

const handleClose = () => {
  emit("cancel")
}

const handleOk = () => {
  // console.log(props.show)
  emit("ok")
}

const style = {
  width: props.width
}

onMounted( () => {
} )
</script>

<style scoped lang="scss">
.footer{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.body{
  padding: 10px 20px;
  box-sizing: border-box;
}
</style>
